<template>
	<view>
		<view class="top-nav-box">
			<view class="top-box">
				<view class="top-nav-img">
					<image src="@/static/hjpImg/logo.png" ></image>
					
				</view>
				<view class="top-content">
					<view class="navi_content" @click="logoShow">
						<!-- 登录成功后是绿色点，没登录前灰色 -->
						<view :class="['cricle-grey', {'cricle-green': usreaddress != ''}]"></view>
						<text v-if="usreaddress != ''">{{getCaption(usreaddress)}}</text>
						<text v-else>Link Wallet</text>
					</view>
					<view class="navi-lang" @click="openMenu = true">
						<image src="@/static/hjpImg/menuIcom.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 登录钱包 -->
<!-- 		<u-overlay :show="showLogin" >
			<view class="overlayoadingicon">
				<view class="overtitle">
					Choose Wallet
				</view>
				<view class="overcenter flex-between">
					<view v-for="(item, index) in logoList" :key="index" class="TPClass" @click="LOGO(index+1)">
						<image :src="item.image" mode=""></image>
						<view class="ovetext">{{item.text}}</view>
					</view>
				</view>
			</view>
		</u-overlay> -->
		<!-- 侧边菜单 -->
		<u-popup mode="left" bgColor='transparent' :show="openMenu" @close="closePop">
			<view class="sidemenu-left">
				<view class="header-box">
					<view class="self-logo">
						<image src="@/static/hjpImg/lianxi.jpg" width="56px" height="56px"></image>
					</view>
					<view class="self-right">
						<view class="self-name">{{getCaption(usreaddress)}}</view>
						<!-- <view class="self-name">{{this.$t('home.H61')}}</view> -->
						<!-- <view class="self-text">{{urseCount}}</view> -->
					</view>
				</view>
				<view class="menu-list">
					<view class="item-menu" v-for="(item,index) in menuData" :key="index" @click="navto(item.paht)">
						<view class="item-image">
							<image :src="item.image" width="22px" height="21px"></image>
						</view>
						<view class="item-text">{{item.name}}</view>
						<view>
							<u-icon name="arrow-right" color="#999" size="14"></u-icon>
						</view>
					</view>
					
				</view>
			</view>
		</u-popup>
		<!-- 退出登录 不确定要不要-->
		<!-- <u-overlay :show="LogOut" >
			<view class="overlayoadingicon LogOuticon">
				<view class="overtitle">
					{{$t('home.H9')}}
				</view>
				<view class="overcenter flex-between">
					{{$t('home.H98')}}
					<br>{{$t('home.H99')}}
					<br>{{$t('home.H100')}}	
				</view>
				<view class="logBotton flex-between" @click="LogOut=false">
					<view class="QuitClass">
						{{$t('home.H35')}}
					</view>
					<view class="CancelClsas" @click="LogOutCilck">
						{{$t('home.H36')}}
					</view>
				</view>
			</view>
		</u-overlay> -->
		<u-overlay :show="languageShow">
			<view class="langcentent">
				<view class="back" @click="languageShow = false;openMenu=true">
					<u-icon name="arrow-left" color="#999" size="18"></u-icon>
					<view class="">
						{{$t('home.H116')}}
					</view>
				</view>
				<view 
				class="langiteme flex-display"
				v-for="(item,index) in columns" 
				@click="grouCilck(item)"
				:key="item.value">
					<image :src="item.image" mode=""></image>
					{{item.label}}
				</view>
				
				
			</view>                           
		</u-overlay>
		
	</view>
</template>

<script>
	import {number2string} from '@/api/help.js'
	import {
		getRandomNum,
		metaLogin,
		userbind,
		getBindaddress,
		getcodeapi,
		metamasklogin
	} from '@/api/home.js'
	export default {
		name:"topnavi",
		data() {
			return {
				//横向两端排列形式数据
								radiolist7: [{
										name: '可爱',
										disabled: false
									},
									{
										name: '一般',
										disabled: false
									},
									{
										name: '不可爱',
										disabled: false
									},
								],
								// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
								radiovalue7: '可爱',
				currentLange: '',
				urseCount: '',
				openMenu: false,
				showLogin: false,
				logoList: [
					{text: 'TP', image:require('@/static/exrImg/TP.png')},
					{text: 'IM', image:require('@/static/exrImg/IM.png')},
				],
				languageShow: false,
				
				codeShow: false,
				showodal:false,
				istpIM:1,
				codevalue:"",
				memberId:"",
				content:this.$t('home.H146'),
				paracargoNum:'',
				usreaddress:"",
				columns: [
					{label:"中文",value:'zh',image:require('@/static/exrImg/lang1.png')},
					{label:"English",value:'en',image:require('@/static/exrImg/lang5.png')},
					// {label:"日本語",value:'jp',image:require('@/static/exrImg/lang4.png')},
					// {label:"한국어",value:'hy',image:require('@/static/exrImg/lang3.png')},
					// {label:"ภาษาไทย",value:'alb',image:require('@/static/exrImg/lang2.png')}
				],
			};
		},
		mounted() {
			this.currentLange = uni.getStorageSync('locale')|| 'en';
			this.usreaddress = uni.getStorageSync('account')|| '';
			this.groupChange({value:this.currentLange});
			this.logoShow();
		},
		methods: {
			//登录
			async logoShow(){
					var Web3 = require('web3');
					const web3 = new Web3(window.ethereum);
					// 授权获取账户
					//var accounts = await web3.eth.getAccounts();
					const accounts = await ethereum.enable();
					if(this.usreaddress != '' && this.usreaddress != accounts[0]){
						uni.clearStorage();
						uni.clearStorageSync();
						location.reload();
						return
					}
					if(this.usreaddress == accounts[0]){
						return 
					}
					// 取第一个账户
					var myAccount = accounts[0];
					
					this.usreaddress = myAccount;
					
					let obj ={
						address:this.usreaddress
					}
					const getcode =await getcodeapi(obj)
					
					console.log(getcode,'1111')
					if(getcode.code == 0){
						let ress = await web3.eth.personal.sign(getcode.data.Code,this.usreaddress,"");
						
						let logindata = {
							address:this.usreaddress,
							signature:ress
						}
						const getuserinfo = await metamasklogin(logindata)
						if(getuserinfo.code == 200){
							uni.setStorageSync('account',myAccount);
							uni.setStorageSync('accessToken',getuserinfo.data.Token)
							uni.setStorageSync('userId',getuserinfo.data.Id)
						}
					}
					uni.showToast({
						title: this.$t('home.H50'),
						duration: 2000,
						icon: "success"
					});
			},
			closePop() {
			  this.openMenu = false;
			},
			navto(url) {
				this.openMenu = false;
				if(url =='Language')return this.languageShow = true;
				uni.navigateTo({
					url: url
				});
			},
			// 钱包选择方式的方法，不确定用不用
			async LOGO(index) {
				this.istpIM = index;
			},
			grouCilck(n){
				this.groupChange(n);
				location.reload();
			},
			groupChange(n) {
				uni.setLocale(n.value)
				this._i18n.locale = n.value;
				this.languageShow = false;
				uni.setStorageSync('locale', n.value);
			
			},
		},
		computed:{
			menuData(){
				return [
					// {name: this.$t('home.H0'), image:require('@/static/hjpImg/menuO.png'),paht:'/pages/Asset/Asset'},
					{name: this.$t('home.H1'), image:require('@/static/hjpImg/menuT.png'),paht:'/pages/MyTeam/MyTeam'},
					// {name: this.$t('home.H3'), image:require('@/static/hjpImg/menuTh.png'),paht:'/pages/routMap/routMap'},
					{name: this.$t('home.H2'), image:require('@/static/hjpImg/menuF.png'), paht:'Language'},
				]
			},
		},
	}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
image {
	width: 100%;
	height: 100%;
}
.top-nav-box {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	padding-top: 50rpx;
	@include size(335px, 62rpx);
	z-index: 1000;
	margin: 0 auto;
	.top-box {
		@include flex-space-between(space-between, center);
		@include size(100%, 62rpx);
		.top-nav-img {
			@include size(140rpx, 62rpx);
		}
		.top-content {
			height: 62rpx;
			@include flex-space-between(space-between, center);
			.navi_content {
				@include size(123px, 30px);
				@include font(13px, 500);
				display: flex;
				align-items: center;
				color: #FFFFFF;
				background: rgba(14,173,105,0.09);
				border-radius: 15px;
				border: 1px solid #691EE2;
				.cricle-green {
					background: #0EAD69;
				}
				.cricle-grey {
					background: #DDDDDD;
					@include size(6px, 6px);
					border-radius: 50%;
					margin: 0 6px 0 10px;
				}
			}
			.navi-lang {
				@include size(22px, 17px);
				margin-left: 14px;
			}
		}
	}
}

.overlayoadingicon{
	width: 343px;
	height: 253px;
	background: #2A2A2D;
	border-radius: 20px;
	.overtitle{
		text-align: center;
		font-size: 22px;
		margin-top: 30px;
		font-weight: bold;
		color: #50A542;
	}
	.overcenter{
		margin: 0 56px;
		height: 192px;
		.TPClass,.IMClass{
			width: 71px;
			image{
				width: 71px;
				height: 71px;
			}
			.ovetext{
				font-size: 22px;
				text-align: center;
				font-weight: bold;
				color: #FFFFFF;
				margin-top: 20px;
			}
		}
	}
	
}

.sidemenu-left {
	@include size(250px, 100%);
	background: url('@/static/hjpImg/menuBg.png');
	background-size: cover;
	.header-box {
		margin: 94px 0px 50rpx 17px;
		@include size(233px, 56px);
		@include flex-space-between(flex-start, center);
		.self-logo {
			@include size(56px, 56px);
			margin-right: 9px;
		}
		.self-right {
			
			.self-name {
				@include size(100%, 20px);
				color: #D5D5D5;
				line-height: 20px;
				margin: 7px 0 4px 0;
				font-size: 30rpx;
				font-weight: 600;
			}
			.self-text {
				width: 100%;
				@include font(18px, 600);
				color: #6A20E2;
			}
		}
	}
	.menu-list {
		@include size(250px, 44px);
		.item-menu {
			@include font(14px, 500);
			@include flex-space-between(flex-start, center);
			margin-left: 20px;
			height: 44px;
			color: #D8D8D8;
			.item-image {
				@include size(22px, 21px);
				margin-right: 10px;
			}
			.item-text {
				height: 22px;
				line-height: 22px;
				width: 157px;
			}
		}
	}
}
.langcentent{
	width: 100%;
	background: #0E1327;
	position: absolute;
	top: 0;
	bottom: 0px;
	left: 0px;
	padding:0 30rpx;
	.back{
		padding: 26rpx 0rpx;
		display: flex;
		font-size: 30rpx;
		view:nth-child(2){
			margin-left: 14rpx;
		}
	}
	.langiteme{
		width: 100%;
		height: 54px;
		margin: 10px 0;
		font-size: 16px;
		image{
			width: 24px;
			height: 24px;
			margin-right: 10px;
			border-radius: 50%;
		}
	}
	.qeuding{
		font-size: 15px;
		text-align: center;
		color: #FC6655;
		line-height: 54px;
	}
}
</style>